import ajax from '../utils/ajax';
import $ from '../jquery/jquery.min.js'
const pageData = {
    currentPage: 1,//当前页
    pageSize: 7,//每页显示多少
    pages: 0,//总页数
    total: 0,//总条数
    now: 0//目前在第几条
}
render();
renderPages();




//新增供应商页面返回按钮
$("#back").click(function () {
    $(".target").addClass("active");
    $(".supplyList").removeClass("active");
    renderPages();
    render();
})
//添加供应商
$("#save").click(function () {
    const supplierName = $(".supplierName").val();
    const supplierMan = $(".supplierMan").val();
    const supplierTel = $(".supplierTel").val();
    const supplierEmail = $(".supplierEmail").val();
    const supplierAddress = $(".supplierAddress").val();
    const supplierNote = $(".supplierNote").val();

    ajax({
        url: "/supplier/add",
        type: "get",
        data: {
            supplierName, supplierMan,
            supplierTel, supplierEmail,
            supplierAddress, supplierNote
        },
        success(res) {
            if (res.code == 200) {
                alert("添加成功");
                pageData.currentPage = 1;
                render();
                renderPages();
                $(".supplierName").val('');
                $(".supplierMan").val('');
                $(".supplierTel").val('');
                $(".supplierEmail").val('');
                $(".supplierAddress").val('');
                $(".supplierNote").val('');
            } else {
                alert("添加失败");
            }
        }
    })
})
//删除供应商
$(".supplyList").on("click", ".delSupplier", function () {
    const result = confirm("确认是否删除");
    if (result) {
        const _id = $(this).data("id");
        delSupplier(_id);
        pageData.currentPage = 1;
        renderPages();
        render();
    }

})
//修改供应商
$(".supplyList").on("click", ".changeSupplier", async function () {
    $("#materialChange").removeClass("active");
    const _id = $(this).data("id");
    const { result } = await findSupplier(_id);
    result.map(item => {
        $(".changeName").val(item.supplierName);
        $(".changeMan").val(item.supplierMan);
        $(".changeTel").val(item.supplierTel);
        $(".changeEmail").val(item.supplierEmail);
        $(".changeAddress").val(item.supplierAddress);
        $(".changeNote").val(item.supplierNote || "");
        $(".change").attr("index", item._id);
    })


})
//取消修改供应商
$(".changeMain").on("click", ".goBack", function () {
    $(".changeMain").addClass("active");
})
//确认修改供应商
$("#materialChange").on("click", ".change", function () {
    const _id = $(this).attr("index");
    const supplierName = $(".changeName").val();
    const supplierMan = $(".changeMan").val();
    const supplierTel = $(".changeTel").val();
    const supplierEmail = $(".changeEmail").val();
    const supplierAddress = $(".changeAddress").val();
    const supplierNote = $(".changeNote").val();
    changeSupplier(_id, supplierName, supplierMan, supplierTel,
        supplierEmail, supplierAddress, supplierNote);
})
//搜索供应商
$("#findSupply input").keyup(function () {
    render();
})
//修改每一页显示多少条
$("#page select").change(function () {
    const val = $("#page select").val();
    pageData.pageSize = val;
    pageData.currentPage = 1;
    renderPages();
    render();
})
//下一页
$(".nextPage").click(function () {
    if (pageData.currentPage < pageData.pages) {
        pageData.currentPage++;
        render();
        renderPages()
    }

})
//上一页
$(".lastPage").click(function () {
    if (pageData.currentPage > 1) {
        pageData.currentPage--;
        render();
        renderPages()
    }
})
//点击对应页数
$(".pageBox").on("click", ".num", function () {
    pageData.currentPage = $(this).text();
    render();
    renderPages()
})
//点击更换页面
$("#page").on("blur", ".jumpInput", function () {
    const val = $(".jumpInput").val();
    if (val <= pageData.pages) {
        pageData.currentPage = val;
        render();
        renderPages();
    }

})


//功能区
//获取供应商
function getSupplier() {
    const value = $("#findSupply input").val();
    return new Promise((resolve, reject) => {
        ajax({
            url: '/supplier/get',
            data: {
                value,
                currentPage: pageData.currentPage,
                pageSize: pageData.pageSize
            },
            success(res) {
                resolve(res)
            }
        })
    })

}
//渲染供应商
async function render() {
    const { result, total, pages } = await getSupplier();
    pageData.pages = pages;
    pageData.total = total;
    if (result) {
        const html = result.map((item, index) =>
            `
            <tr>
                <td class="mainIndex">${index + 1}</td>
                <td class="mainName">${item.supplierName}</td>
                <td class="mainMan">${item.supplierMan}</td>
                <td class="mainTel">${item.supplierTel}</td>
                <td class="mainEmail">${item.supplierEmail}</td>
                <td class="mainAddress">${item.supplierAddress}</td>
                <td class="mainNote">${item.supplierNote || "无"}</td>
                <td><span class="changeSupplier" data-id="${item._id}">修改</span> <span class="delSupplier" data-id="${item._id}">删除</span></td>
            </tr>
        `
        ).join("");
        $(".supplyList tbody").html(html);
        renderMaterialList();
    }

}
//根据ID删除供应商
function delSupplier(_id) {
    ajax({
        url: '/supplier/del',
        type: 'post',
        data: {
            _id
        },
        success(res) {
            if (res.code == 200) {
                alert("删除成功");
                render();
            } else {
                alert("删除失败");
            }
        }
    })
}
//根据ID查找供应商
function findSupplier(_id) {
    return new Promise((resolve, reject) => {
        ajax({
            url: '/supplier/find',
            type: 'get',
            data: {
                _id
            },
            success(res) {
                resolve(res);
            }
        })
    })
}
//修改供应商
function changeSupplier(_id, supplierName, supplierMan, supplierTel,
    supplierEmail, supplierAddress, supplierNote) {
    ajax({
        url: '/supplier/change',
        type: 'post',
        data: {
            _id, supplierName, supplierMan, supplierTel,
            supplierEmail, supplierAddress, supplierNote
        },
        success(res) {
            if (res.code == 200) {
                alert("修改成功");
                $(".changeName").val('');
                $(".changeMan").val('');
                $(".changeTel").val('');
                $(".changeEmail").val('');
                $(".changeAddress").val('');
                $(".changeNote").val('');
                render();
                $(".changeMain").addClass("active");
            } else {
                alert("修改失败")
            }
        }
    })


}
//根据总条数渲染一共多少页
function totalPages() {
    const value = $("#findSupply input").val();
    return new Promise((resolve, reject) => {
        ajax({
            url: '/supplier/total',
            type: 'post',
            data: {
                value,
                currentPage: pageData.currentPage,
                pageSize: pageData.pageSize
            },
            success(res) {
                resolve(res)
            }
        })
    })

}
//渲染页数
async function renderPages() {
    const res = await totalPages();
    if (res.code == 200) {
        const pages = res.pages;
        var html = "";
        for (let i = 1; i <= pages; i++) {
            html += `<span class="num spans">${i}</span>`
        }
    } else {
        const pages = res.pages;
        for (let i = 1; i <= pages; i++) {
            html += `<span class="num spans">${i}</span>`
        }
    }
    $("#materialPage").html(html);
    const box = $(".pageBox .num");
    for (let i = 0; i < box.length; i++) {
        if (box[i].innerText == pageData.currentPage) {
            box[i].style.backgroundColor = "#409EFF";
            box[i].style.color = "white";
        }
    }

}
//渲染供应商列表
async function renderMaterialList(){
    const { result, total, pages } = await getSupplier();
    const html = result.map((item, index) => 
             `<option index="${item._id}">${item.supplierName}</option>
            `
    ).join("");
    if (html) {
        $("#materialSelect").html(html);
    }
}
